<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>医院员工信息管理系统</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f9f9f9;
            margin: 0;
            padding: 0;
            color: #333;
        }
        header {
            background-color: #4CAF50;
            color: white;
            padding: 15px 0;
            text-align: center;
            font-size: 1.5em;
        }
        .container {
            width: 90%;
            margin: 20px auto;
        }
        .filter-container {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .pagination {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        .filter-container select{
            padding:4px;
            border-radius:4px;
        }
        .filter-container .add-employee-btn, .pagination button {
            padding: 8px;
            border-radius: 5px;
            border: 1px solid #ccc;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        table th, table td {
            padding: 12px;
            border: 1px solid #ddd;
            text-align: left;
        }
        table th {
            background-color: #4CAF50;
            color: white;
        }
        table tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        .action-buttons button {
            padding: 5px 10px;
            margin-right: 5px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.4);
        }
        .modal-content {
            background-color: white;
            margin: 10% auto;
            padding: 20px;
            border-radius: 10px;
            width: 50%;
            max-height: 80vh;
            overflow-y: auto;
        }
        .close-btn {
            color: #aaa;
            float: right;
            font-size: 28px;
            cursor: pointer;
        }
        .form-container input, .form-container select {
            width: 100%;
            padding: 10px;
            margin: 8px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .form-container button {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 5px;
            font-size: 1.1em;
            transition: background-color 0.3s ease;
        }
    </style>
</head>
<body>
<header>医院员工信息管理系统</header>

<div class="container">
    <div class="filter-container">
        <div>
            <label for="filter-department">按科室筛选:</label>
            <select id="filter-department" onchange="filterByDepartment()">
                <option value="">显示全部</option>
                <option value="心内科">心内科</option>
                <option value="消化内科">消化内科</option>
                <option value="呼吸内科">呼吸内科</option>
                <option value="神经外科">神经外科</option>
                <option value="胸外科">胸外科</option>
                <option value="泌尿外科">泌尿外科</option>
                <option value="急诊内科">急诊内科</option>
                <option value="急诊外科">急诊外科</option>
                <option value="急救科">急救科</option>
            </select>
        </div>
        <button class="add-employee-btn" onclick="openModal(false)">新增员工</button>
    </div>

    <table id="employee-table">
        <thead>
        <tr>
            <th>员工号</th>
            <th>姓名</th>
            <th>科室</th>
            <th>职位</th>
            <th>联系方式</th>
            <th>入职日期</th>
            <th>执业证书编号</th>
            <th>密码</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody></tbody>
    </table>

    <div class="pagination">
        <button id="prev-page" onclick="changePage(-1)">上一页</button>
        <span id="page-info">第 1 页</span>
        <button id="next-page" onclick="changePage(1)">下一页</button>
    </div>
</div>

<div id="employee-modal" class="modal">
    <div class="modal-content">
        <span class="close-btn" onclick="closeModal()">×</span>
        <div class="form-container">
            <h2 id="modal-title">新增/编辑员工</h2>
            <form id="employee-form">
                <label for="name">姓名:</label>
                <input type="text" id="name" name="name" required>

                <label for="department">科室:</label>
                <select id="department" name="department" required>
                    <option value="心内科">心内科</option>
                    <option value="消化内科">消化内科</option>
                    <option value="呼吸内科">呼吸内科</option>
                    <option value="神经外科">神经外科</option>
                    <option value="胸外科">胸外科</option>
                    <option value="泌尿外科">泌尿外科</option>
                    <option value="急诊内科">急诊内科</option>
                    <option value="急诊外科">急诊外科</option>
                    <option value="急救科">急救科</option>
                </select>

                <label for="position">职位:</label>
                <select id="position" name="position" required>
                    <option value="医生">医生</option>
                    <option value="护士">护士</option>
                    <option value="技术人员">技术人员</option>
                    <option value="其他">其他</option>
                </select>

                <label for="contact">联系方式:</label>
                <input type="text" id="contact" name="contact" required>

                <label for="start-date">入职日期:</label>
                <input type="date" id="start-date" name="start-date" required>

                <label for="license">执业证书编号:</label>
                <input type="text" id="license" name="license" required>

                <label for="employee-number">员工号 (自动生成):</label>
                <input type="text" id="employee-number" name="employee-number" disabled>

                <label for="password">密码:</label>
                <input type="text" id="password" name="password" value="111111" disabled>

                <button type="button" onclick="addOrEditEmployee()">提交</button>
            </form>
        </div>
    </div>
</div>

<script>
    let editIndex = null;
    const employees = [];
    const employeesPerPage = 10;
    let currentPage = 1;

    document.addEventListener('DOMContentLoaded', function () {
        loadEmployees();
    });

    function loadEmployees() {
        fetch('/employee/list')
            .then(response => response.json())
            .then(data => {
                employees.length = 0;
                employees.push(...data);
                renderTable();
            });
    }

    function renderTable() {
        const tableBody = document.getElementById('employee-table').getElementsByTagName('tbody')[0];
        tableBody.innerHTML = '';
        const filter = document.getElementById('filter-department').value;
        const filteredEmployees = employees.filter(emp => filter === "" || emp.departmentName === filter);
        const totalPages = Math.ceil(filteredEmployees.length / employeesPerPage);
        const start = (currentPage - 1) * employeesPerPage;
        const end = Math.min(start + employeesPerPage, filteredEmployees.length);
        const currentEmployees = filteredEmployees.slice(start, end);

        currentEmployees.forEach(employee => {
            const row = tableBody.insertRow();
            row.innerHTML = `
                <td>${employee.employeeNumber}</td>
                <td>${employee.name}</td>
                <td>${employee.departmentName}</td>
                <td>${employee.positionName}</td>
                <td>${employee.contact}</td>
                <td>${employee.startDate}</td>
                <td>${employee.licenseNumber}</td>
                <td>${employee.password}</td>
                <td class="action-buttons">
                    <button onclick="editEmployee('${employee.employeeNumber}')">编辑</button>
                    <button onclick="deleteEmployee('${employee.employeeNumber}')">删除</button>
                </td>
            `;
        });

        document.getElementById('page-info').innerText = `第 ${currentPage} 页 / 共 ${totalPages} 页`;
        document.getElementById('prev-page').classList.toggle('disabled', currentPage === 1);
        document.getElementById('next-page').classList.toggle('disabled', currentPage === totalPages || totalPages === 0);
    }

    function addOrEditEmployee() {
        const employeeData = {
            name: document.getElementById('name').value,
            departmentName: document.getElementById('department').value,
            positionName: document.getElementById('position').value,
            contact: document.getElementById('contact').value,
            startDate: document.getElementById('start-date').value,
            licenseNumber: document.getElementById('license').value,
            employeeNumber: document.getElementById('employee-number').value,
            password: document.getElementById('password').value
        };

        const url = editIndex === null ? '/employee/add' : `/employee/edit/${employeeData.employeeNumber}`;
        const method = editIndex === null ? 'POST' : 'PUT';

        fetch(url, {
            method: method,
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(employeeData)
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    closeModal();
                    loadEmployees();
                } else {
                    alert(data.message);
                }
            });
    }

    function editEmployee(employeeNumber) {
        const employee = employees.find(emp => emp.employeeNumber === employeeNumber);
        editIndex = employees.indexOf(employee);

        document.getElementById('name').value = employee.name;
        document.getElementById('department').value = employee.departmentName;
        document.getElementById('position').value = employee.positionName;
        document.getElementById('contact').value = employee.contact;
        document.getElementById('start-date').value = employee.startDate;
        document.getElementById('license').value = employee.licenseNumber;
        document.getElementById('employee-number').value = employee.employeeNumber;
        document.getElementById('password').value = employee.password;

        // 设置编辑员工时密码输入框为可编辑
        document.getElementById('password').disabled = false;

        document.getElementById('modal-title').innerText = "编辑员工";
        openModal(true);
    }

    function deleteEmployee(employeeNumber) {
        if (confirm('确定删除此员工吗？')) {
            fetch(`/employee/delete/${employeeNumber}`, { method: 'DELETE' })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        loadEmployees();
                    } else {
                        alert("删除失败，请重试！");
                    }
                });
        }
    }

    function filterByDepartment() {
        currentPage = 1;
        renderTable();
    }

    function openModal(isEdit) {
        document.getElementById('employee-modal').style.display = "block";
        if (!isEdit) {
            document.getElementById('modal-title').innerText = "新增员工";
            document.getElementById('employee-form').reset();
            editIndex = null;

            // 生成员工号
            const today = new Date().toISOString().slice(0, 10).replace(/-/g, '');
            const randomPart = Math.random().toString(36).substring(2, 6).toUpperCase();
            const employeeNumber = 'E' + today + randomPart;
            document.getElementById('employee-number').value = employeeNumber;

            // 设置新增员工时密码输入框不可编辑
            document.getElementById('password').disabled = true;
        }
    }

    function closeModal() {
        document.getElementById('employee-modal').style.display = "none";
    }

    function changePage(direction) {
        const totalPages = Math.ceil(employees.length / employeesPerPage);
        currentPage += direction;
        if (currentPage < 1) currentPage = 1;
        if (currentPage > totalPages) currentPage = totalPages;
        renderTable();
    }
</script>

</body>
</html>
